<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="content">
        <view class="top">
          <view class="title">请选择申请原因</view>
        </view>
        <view class="popup-box">
          <scroll-view scroll-y>
            <view v-if="$data.path.length <= 1" class="reason">
              <view
                v-for="(parentItem, parentIndex) of $data.list"
                :key="parentIndex"
              >
                <view class="reason-title">{{ parentItem.value }}</view>
                <view
                  class="row"
                  v-for="(item, index) of parentItem.list"
                  :key="index"
                  @tap="onCheck(item, index, parentItem, parentIndex)"
                >
                  <view class="row_left">{{ item.value }}</view>
                  <view class="row_right">
                    <view
                      class="row_right_box"
                      :class="[{ 'row_right_box--active': item._check }]"
                    >
                      <view
                        v-if="item._check"
                        class="row_right_box--check"
                      ></view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="padding" v-if="$data.check_child == '其他'">
                <u-textarea
                  placeholder="请填写具体原因(必填)"
                  v-model="$data.other_input"
                  count
                ></u-textarea>
              </view>
            </view>
            <view v-else>
              <view class="path">
                <view class="margin-right-sm">
                  <up-icon name="arrow-left" @click="onBackFirst"></up-icon>
                </view>
                <view
                  class="u-line-1"
                  v-for="(item, index) of $data.path"
                  :key="index"
                >
                  <text>{{ item.value }}</text>
                  <text
                    v-if="index < $data.path.length - 1"
                    class="margin-lr-xs"
                  >
                    /
                  </text>
                </view>
              </view>
              <view class="reason">
                <view
                  class="row"
                  v-for="(item, index) of $data.children"
                  :key="index"
                  @tap="onCheckChild(item, index)"
                >
                  <view class="row_left">{{ item }}</view>
                  <view class="row_right">
                    <view
                      class="row_right_box"
                      :class="[
                        { 'row_right_box--active': item == $data.check_child },
                      ]"
                    >
                      <view
                        v-if="item == $data.check_child"
                        class="row_right_box--check"
                      ></view>
                    </view>
                  </view>
                </view>
                <view class="padding" v-if="$data.check_child == '其他'">
                  <u-textarea
                    placeholder="请填写具体原因(必填)"
                    v-model="$data.other_input"
                    count
                  ></u-textarea>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="confirm">
          <view class="common_btn confirm_btn" @tap="onConfirm">确定</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, computed, onMounted, watch } from "vue";
import { useGetConfig } from "../../../../hooks/useCommon";
import { configKeyEnum } from "../../../../enums/common";
import BasicConfig from "../../../../utils/config";
import uTextarea from "../../../../uni_modules/uview-plus/components/u-textarea/u-textarea.vue";
const $emit = defineEmits(["update:show", "close", "confirm"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const $data = reactive({
  list: [],
  my: [], // 个人原因
  shop: [], // 商家原因
  other: [], // 其他原因
  path: [], // 选择的一级二级路由
  children: [], // 三级选项
  check_child: "", // 选择的三级选项
  other_input: "", // 其他原因输入框
  // check_child_remark: "", // 三级选项选择"其他"后,输入的内容
});
const init = () => {
  //   useGetConfig({ key: configKeyEnum["订单售后原因"] }).then((res) => {
  //     $data.list = res;
  //     $data.list.map((m) => (m._check = false));
  //   });
  $data.my = [
    {
      key: "1",
      value: "买多了/买错了/不需要了",
      _check: false,
      children: [],
    },
    {
      key: "2",
      value: "没看清楚使用规则，要用时才发现有限制",
      _check: false,
      children: [],
    },
  ];
  $data.shop = [
    {
      key: "3",
      value: "商家营业但不接待",
      _check: false,
      children: [
        "额外增加使用条件",
        "商家不承认团购",
        "商品下架/活动结束",
        "核销机器坏了/核销异常",
        "团购券过期",
        "其他",
      ],
    },
    {
      key: "4",
      value: "商家停业/装修/转让",
      _check: false,
      children: [],
    },
    {
      key: "5",
      value: "需要加价/购买其他产品才能用",
      _check: false,
      children: [],
    },
    {
      key: "6",
      value: "电话/发消息联系不上商家",
      _check: false,
      children: [
        "找不到门店",
        "电话号码为空/错误/停机",
        "商家不接电话",
        "商家在线客服不回复",
        "没有商家联系入口",
        "其他",
      ],
    },
    {
      key: "7",
      value: "商品缺货/无货",
      _check: false,
      children: [
        "商品已下架",
        "商品已售罄/无现货",
        "套餐部分商品售罄",
        "套餐内赠品售罄",
        "其他",
      ],
    },
    {
      key: "8",
      value: "商家引导改用其他方式付款",
      _check: false,
      children: [
        "使用其他团购APP交易",
        "使用微信、支付宝、现金交易",
        "抖音重新下单交易",
        "其他支付方式",
      ],
    },
    {
      key: "9",
      value: "实际与宣传/描述不一样",
      _check: false,
      children: [
        "服务内容与购买时不一致",
        "实际店铺地址与平台展示不一致",
        "其他",
      ],
    },
    {
      key: "10",
      value: "商家服务态度差",
      _check: false,
      children: [],
    },
    {
      key: "11",
      value: "团购体验/效果不满意",
      _check: false,
      children: [],
    },
  ];
  $data.other = [
    {
      key: "12",
      value: "商品买贵了或降价",
      _check: false,
      children: [
        "店里更优惠",
        "其他平台更优惠",
        "抖音降价了",
        "商品折扣力度小",
        "其他",
      ],
    },
    {
      key: "13",
      value: "朋友/网上评价不好",
      _check: false,
      children: [],
    },
    {
      key: "14",
      value: "距离过远商家无法服务",
      _check: false,
      children: [],
    },
    {
      key: "15",
      value: "担心安全/天气等问题",
      _check: false,
      children: [],
    },
    {
      key: "16",
      value: "其他",
      _check: false,
      children: [],
    },
  ];
  $data.list = [
    { value: "个人原因", list: $data.my },
    { value: "商家原因", list: $data.shop },
    { value: "其他原因", list: $data.other },
  ];
};
const onCheck = (item, index, parentItem, parentIndex) => {
  // $data.list.map((m, i) => (m._check = i === index));
  $data.list.forEach((p, i) => {
    p.list.map((m) => (m._check = false));
    item._check = true;
  });
  $data.check_child = item.value;
  $data.children = item.children;
  $data.path = [parentItem];
  if ($data.children.length > 0) {
    // $data.path = [parentItem, item];
    $data.path = [...$data.path, item];
    $data.other_input = "";
  }
  console.log("$data.path", $data.path, $data.children);
};
const onCheckChild = (item, index) => {
  // $data.children.map((m, i) => (m._check = i === index));
  console.log("onCheckChild", item);
  $data.check_child = item;
};
const onBackFirst = () => {
  const len = $data.path.length;
  if (len > 0) {
    $data.path[len - 1]._check = false;
  }
  $data.children = [];
  $data.path = [];
  $data.check_child = "";
  $data.other_input = "";
};
const close = () => {
  $emit("update:show", false);
};
const open = () => {};
const onConfirm = () => {
  if (!$data.check_child && $data.check_child !== "其他") {
    BasicConfig.toast("请选择申请原因");
    return;
  }
  if ($data.check_child === "其他" && !$data.other_input) {
    BasicConfig.toast("请输入具体原因");
    return;
  }
  let path = $data.path.map((m) => m.value).join(",");
  if ($data.check_child === "其他") {
    path = path + "," + $data.other_input;
  } else {
    path = path + "," + $data.check_child;
  }
  console.log("path", path);
  // console.log("$data.check_child", $data.check_child);
  // console.log(
  //   "confirm",
  //   $data.check_child === "其他" ? $data.other_input : $data.check_child
  // );
  $emit("confirm", path);
  close();
};
const _onConfirm = () => {
  const opt = $data.list.find((l) => l._check);
  if (!opt) {
    BasicConfig.toast("请选择申请原因");
    return;
  }
  $emit("confirm", opt.value);
  close();
};
onMounted(() => {
  init();
});
</script>
<script>
// 小程序穿透
export default {
  components: { uTextarea },
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx 30rpx 0 0 !important;
    height: 80vh;
  }
  ::v-deep .u-popup__content__close {
    z-index: 999999;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    height: 80vh;
    // padding-bottom: 200rpx;
    overflow-y: auto;
    .top {
      background: #ffffff;
      position: sticky;
      top: 0;
      z-index: 9999;
      height: 8vh;
      .title {
        background: #ffffff;
        padding: 30rpx;
        font-size: 36rpx;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
      }
    }
    .popup-box {
      height: 65vh;
      scroll-view {
        width: 100%;
        height: 65vh;
      }
      .reason {
        &-title {
          padding: 30rpx;
          font-size: 36rpx;
        }
      }
      .path {
        display: flex;
        align-items: center;
        padding: 30rpx;
        font-size: 34rpx;
      }
    }
    .row {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }
      &_left {
        width: calc(100% - 120rpx);
      }
      &_right {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: unset !important;
        &_box {
          width: 50%;
          height: 50%;
          border: 1px solid #cccccc;
          background: #cccccc;
          position: relative;
          border-radius: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          &--check {
            width: 70%;
            height: 70%;
            border-radius: 100%;
            background-color: $main-color;
          }
        }
        &_box--active {
          background: rgba($color: #ffffff, $alpha: 0);
          border-color: $main-color;
        }
      }
    }

    .confirm {
      width: 100%;
      //   margin: 30rpx 0;
      padding: 0 30rpx;
      background: #ffffff;
      z-index: 9999;
      position: fixed;
      bottom: 0rpx;
      height: 7vh;
      &_btn {
        width: 100%;
        padding: unset !important;
        height: 6vh;
        line-height: 6vh;
      }
    }
  }
}
</style>
